<template>
    <div class="messagePer">
        <el-dialog class="cusDialog" 
        :fullscreen="true"
         v-model="isMessageType" 
         @close="closeDialog" >
            516165165
            <button @click="sendMes">发送</button>
          <div v-html="state.receivedMessage"></div>
        </el-dialog>

        


    </div>
    </template>
    
    <script setup lang='ts'>
        const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
        import { useUserStore } from "@/store/modules/user";
        import { useSystemStore } from "@/store/modules/system";
        const api = inject('$base', null as any);

        const useStore = useUserStore();
        const base = useSystemStore();
        const isMessageType = computed(() => {
          return base.isMessageType == 1 ?true:false;
        });
        function closeDialog(){
            base.isMessageType = 0;
        }

 


  // 使用reactive创建一个响应式对象来存储WebSocket对象和接收的消息
    const state:any = reactive({
      socket: null,
      receivedMessage: ''
    });

    // 创建WebSocket连接
    var canshu = {
        appId:"fe0d85b2",
        timestamp:"1711939672",
        signature:"vPuW8Mqkw8kp1gNfjo1k5vzlfkA="
    }
    const createWebSocketConnection = () => {
      state.socket = new WebSocket(`wss://chatdoc.xfyun.cn/openapi/chat?appId=${canshu.appId}&timestamp=${canshu.timestamp}&signature=${canshu.signature}`);
      state.socket.onopen = () => {
        console.log('WebSocket连接已建立');
      };
      state.socket.onmessage = (event) => {
        console.log('接受的消息',JSON.parse(event.data))
        state.receivedMessage += JSON.parse(event.data).content;
      };
      state.socket.onclose = () => {
        console.log('WebSocket连接已关闭');
      };
    };
   
   function sendMes(){
    const meaage = {
        "chatExtends": {
            "wikiPromptTpl": "请将以下内容作为已知信息：\n<wikicontent>\n请根据以上内容回答用户的问题。\n问题:<wikiquestion>\n回答:",
            "wikiFilterScore": 0.9,
            "temperature": 0.5,
            spark:true
        },
        "fileIds": ["ce5cacc43d814ee396bb3c7fa3e406b7"],
        "messages": [
            {
            "role": "user",
            "content": "石家庄天气今天天气好吗?"
            }
        ]
    }

    state.socket.send(JSON.stringify(meaage));
   }
    



        onMounted(()=>{
            createWebSocketConnection();
            console.log(1651651)
        })
    </script>

    <style>
        .cusDialog{
            width: 90%;
            max-width: 1100px;   
        }
        .cusDialog.is-fullscreen{
            max-width: 100%!important;
            width: 100%!important;
        }
    </style>
  